<template>
  <div>
    <el-form label-width="80px" size="mini">
      <el-alert
        title="必须是处于 /views下的文件"
        type="info" :closable="false"
        show-icon style="margin-bottom: 10px">
      </el-alert>
      <el-form-item label="组件路径">
        <el-input type="textarea" rows="5" v-model="item.path"></el-input>
      </el-form-item>
      <el-form-item label="组件参数">
        <el-button icon="el-icon-setting" @click="handleConfig">配置</el-button>
      </el-form-item>
      <table ref="configTable" class="form-item-config">
        <thead>
        <tr>
          <th>名称</th>
          <th>值</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(p, $index) in item.params" :key="$index">
          <td>{{p.code}}</td>
          <td>
            <span v-if="p.type==='&'">{ {{p.value}} }</span>
            <span v-else>{{p.value}}</span>
          </td>
        </tr>
        </tbody>
      </table>
      <border-style :item="item"></border-style>
    </el-form>
    <config-params v-if="configVisible" :params="item.params" @close="configVisible=false" @success="handleConfigOk"/>
  </div>

</template>
<script>
  import DataSourceBtn from '../../dataSource/button';
  import ConfigParams from './configParams';
  import BorderStyle from '../styles/border';

  export default {
    name: 'vpd-component-style',
    components: {
      DataSourceBtn,
      ConfigParams,
      BorderStyle
    },
    props: {
      item: {
        type: Object
      }
    },
    data() {
      return {
        configVisible: false
      }
    },
    methods: {
      handleConfig() {
        this.configVisible = true;
      },
      handleConfigOk(data) {
        this.item.params = data;
        this.configVisible = false;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .form-item-config {
    font-size: 14px;
    position: relative;
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-spacing: 0;

    th, td {
      border: 1px solid #ccc;
      text-align: center;
      padding: 5px;

      input {
        width: 100%;
      }
    }

  }
</style>
